import Base from '../base.js'
import moviesApi from "../../api/movies.js"
export default class extends Base {
    constructor(props) {
        // console.log(props);
        super(props);
        this.data = {
            movies: {
                _id: props._id
            },
            rows: {}
        }
        // console.log(this.data.rows);
        // console.log(this.data.movies);
    }
    render() {
        const { cname, ename, type, area, poster, time, upDate,score , count, intro, isClassic, director, actor } = this.data.rows
        this.$el.html(`
        <h1 style="text-align:center">修改电影信息</h1>
        <div class="layui-form"  lay-filter="formTest">
            <div class="layui-form-item">
                <label class="layui-form-label">电影名</label>
                <div class="layui-input-block">
                    <input type="text" value="${cname}" name="cname" lay-verify="title" autocomplete="off" placeholder="请输入电影名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影英文名</label>
                <div class="layui-input-block">
                    <input type="text" value="${ename}" name="ename" lay-verify="title" autocomplete="off" placeholder="电影英文名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影的类型</label>
                <div class="layui-input-block">
                    <input type="text" name="type" value="${type}" lay-verify="title" autocomplete="off" placeholder="电影的类型" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影首映地区</label>
                <div class="layui-input-block">
                    <input type="text" name="area" value="${area}" lay-verify="title" autocomplete="off" placeholder="电影首映地区" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影时长</label>
                <div class="layui-input-block">
                    <input type="text" name="time" value="${time}" lay-verify="title" autocomplete="off" placeholder="电影时长" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影大陆上映时间</label>
                <div class="layui-input-block">
                    <input type="text" name="upDate" value="${upDate}" lay-verify="title" autocomplete="off" placeholder="电影大陆上映时间" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影评分</label>
                <div class="layui-input-block">
                    <input type="text" name="score" value="${score}" lay-verify="title" autocomplete="off" placeholder="电影评分" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电影票房</label>
                <div class="layui-input-block">
                    <input type="text" name="count" value="${count}" lay-verify="title" autocomplete="off" placeholder="电影票房" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">剧情简介</label>
                <div class="layui-input-block">
                <input type="text" name="intro" value="${intro}" lay-verify="title" autocomplete="off" placeholder="剧情简介" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否是经典</label>
                <div class="layui-input-block">
                    <input type="text" name="isClassic" value="${isClassic?"是":"否"}" lay-verify="title" autocomplete="off" placeholder="是否是经典" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">导演名字</label>
                <div class="layui-input-block">
                    <input type="text" name="director" value="${director}" lay-verify="title" autocomplete="off" placeholder="导演名字" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">演员名字</label>
                <div class="layui-input-block">
                    <input type="text" name="actor" value="${actor}" lay-verify="title" autocomplete="off" placeholder="演员名字" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>
                </div>
            </div>
         </div>
        `)
        this.saveBtn = $(".layui-btn")
        this.cancelBtn = $(".layui-btn .layui-btn-primary")
    }
    rerender() {
        this.data.rows = this.data.movies
        this.render()
        _.forIn(this.data.rows, (value, key) => 
        {
            $(`input[name=${key}`).on("input", event =>
                // console.log(event.target.value)
                this.data.movies[key] = event.target.value
            )
        })
        // console.log(this.data.movies);
        this.saveBtn.on("click", () => this.saveMovies())
    }
    async saveMovies() {
        // console.log(this.data.movies);
        if (!this.data.movies.cname) {
            alert(`请输入正确的电影名字`)
        } else {
            this.data.movies = await moviesApi.updateMoviesSave(this.data.movies)
            alert(`电影相关信息修改成功`)
            location.hash = "#/info/movies"
            
        }
    }
    async getMovies() {
        const { _id } = this.data.movies;
        this.data.movies = await moviesApi.updateMovies({ _id });
        this.rerender()
    }
    handle(){
      
    }
    mounted() {
        this.getMovies()        
    }
}